import React,{lazy,Suspense} from "react";
// 导入路由模块
import { Route } from "react-router-dom";
// 引入home的样式文件
import "./index.css";
import Index from "../Index";
// 导入tabBar组件
import { TabBar } from "antd-mobile";
const News = lazy(()=> import('../News'))
const HouseList = lazy(()=> import('../HouseList'))
const Profile = lazy(()=> import('../Profile'))

// TabBar 数据
const tabItems = [
  {
    title: "首页",
    icon: "icon-ind",
    path: "/home"
  },{
    title: "房源",
    icon: "icon-findHouse",
    path: "/home/list"
  },{
    title: "资讯",
    icon: "icon-infom",
    path: "/home/news"
  },{
    title: "我的",
    icon: "icon-my",
    path: "/home/profile"
  },
]
export default class Home extends React.Component {
  state = {
    selectedTab: this.props.location.pathname//默认选中
  };
componentDidUpdate(oldProps) {
  if (oldProps.location.pathname !== this.props.location.pathname) {
    this.setState(()=> {
      return {selectedTab: this.props.location.pathname}
    })
  }
}
  // 渲染TabBarItem
  renderTabBarItem() {
    return tabItems.map(item => <TabBar.Item
      title= {item.title}
      key= {item.title}
      icon={<i className={`iconfont ${item.icon}`}></i>}
      selectedIcon={<i className={`iconfont ${item.icon}`}></i>}
      selected={this.state.selectedTab === item.path}
      onPress={() => {
        this.setState({
          selectedTab: item.path
        });
        // 路由切换
        this.props.history.push(item.path)
      }}
      data-seed="logId"
    / > )
    
  }
  render() {
    return (
      <Suspense fallback={<div className="route_Loading">Loading...</div>}>
      <div className="home">
        {/* 渲染子路由 */}
        <Route path="/home/news" component={News}></Route>
        <Route exact path="/home" component={Index}></Route>
        <Route path="/home/list" component={HouseList}></Route>
        <Route path="/home/profile" component={Profile}></Route>
        {/* tabBar内容 */}
        <TabBar
          unselectedTintColor="#888"
          tintColor="#21b97a"
          barTintColor="white"
          noRenderContent="true"
        >
          {/* 调用renderTabBarItem()方法渲染tabBar.Item */}
          {this.renderTabBarItem()}
        </TabBar>
      </div>
      </Suspense>
    );
  }
}
